<template>
    <div class="dev">
        <div class="d-pic">
            <img class="p-cat" src="/image/404-cat.png" alt />
            <img class="p-text" src="/image/404-text.png" alt />
        </div>
        <div class="d-link">
            <p>移动端页面尚未开发完成，正在快马加鞭开发中...</p>
            <a href="//gitee.com/is-kyeteo/opensource-blog-web">加入这个开源项目？</a>
            <i class="iconfont icon-github"></i>
        </div>
    </div>
</template>

<style lang="less" scoped>
.dev{
    .d-pic{
        position: relative;
        height: 500px;
        background: url(/image/404-bg.jpg) center no-repeat;
        background-size:auto 100%;
        .p-cat{
            position: absolute;
            top:20%;
            left:50%;
            width:200px;
        }
        .p-text{
            position: absolute;
            top:20%;
            left:20%;
            width:200px;
        }
    }
    .d-link{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:100px;
        a{
            padding: 30px 0;
            color:inherit;
        }
        i{
            font-size: 60px;
        }
    }
}
</style>
